<template>
  <div id="manning">
    <el-card class="manning">
      <el-row type="flex">
        <el-col :span="6" class="title">人员分析</el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="24" class="first">
          <el-col :span="10" class="chart pie">
            <Pie></Pie>
          </el-col>
          <el-col :span="14">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane label="研发一部" name="2"></el-tab-pane>
              <el-tab-pane label="研发二部" name="3"></el-tab-pane>
              <el-tab-pane label="测试部" name="4"></el-tab-pane>
            </el-tabs>
            <el-table :data="tableData" style="width: 100%" border max-height="240">
              <el-table-column prop="name" label="姓名"></el-table-column>
              <el-table-column prop="joinPrj" label="已参与项目数"></el-table-column>
              <el-table-column prop="iterVersion" label="迭代版本数"></el-table-column>
              <!-- 
                    产品部：姓名、已参与项目数、迭代版本数
                    大前端部 ：姓名、已参与项目数、迭代版本数、开发功能点点数、Bug率 、一级Bug率
                    java部 ：姓名、已参与项目数、迭代版本数、Bug率 、一级Bug率
                    测试部 ：姓名、已参与项目数、迭代版本数、测试Bug数量 、一级Bug数量

              -->
              <el-table-column prop="pointCount" label="开发功能点点数"
                v-if="activeName == '2' || activeName == '3'"></el-table-column>
              <el-table-column prop="bugRate" label="Bug率" v-if="activeName == '2' || activeName == '3'"></el-table-column>
              <el-table-column prop="oneBugRate" label="一级Bug率"
                v-if="activeName == '2' || activeName == '3'"></el-table-column>

              <el-table-column prop="testBugCount" label="测试Bug数量" v-if="activeName == '4'"></el-table-column>
              <el-table-column prop="testOneBugCount" label="一级Bug数量" v-if="activeName == '4'"></el-table-column>
            </el-table>
          </el-col>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { allCompPerAnalyze } from "../../../../service/workbenchApi";

import Pie from "./pie";

export default {
  name: "manning",
  components: { Pie },
  data() {
    return {
      activeName: "2",
      tableData: [],
    };
  },
  methods: {
    // 当tab栏被点击的时候
    handleClick(tab, event) {
      this.getData();
    },
    getData() {
      allCompPerAnalyze(this.activeName).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data;
        }
      });
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.manning {
  width: 100%;
  height: 361px;
  margin-top: 10px;
  margin-bottom: 20px;

  .title {
    font-size: 18px;
    color: #303133;
    font-weight: bold;
  }

  .first {
    display: flex;
    width: 100%;
    height: 300px;

    .pie {
      margin-right: 30px;
    }
  }
}
</style>
<style>
#manning .el-tabs--card>.el-tabs__header {
  border-bottom: 0px;
}

#manning .el-tabs__nav {
  border-bottom: 1px solid #e4e7ed;
}

#manning .is-active {
  color: #00b98d;
}

#manning .el-tabs__item:hover {
  color: #00b98d;
}
</style>